//定义变量存储属性值
@pColor:red;
@strongColor:blue;
//定义变量存储选择器名
@duanluo1: #p1;
//定义变量存储属性名
@ys:color;




//变量代替选择器名
@{duanluo1}{
    //变量代替属性名和属性值
    @{ys}: @pColor;
    /*color: @strongColor; 作用域不够*/
    strong{
        //变量代替属性名和属性值
        @{ys}: @strongColor;
        @{ys}: @sc;
        @sc: lightpink; 
    }
}
@pColor: lightBlue;


h3,h4{
    @{ys}: @pColor;
}
.sty1{
    color:orange
}

//定义变量
.s1(@wzyc, @wzdx){
    color: @wzyc;
    font-size: @wzdx;
}
.s2(@bjyc:lightBlue, @wzyc:white){
    background-color: @bjyc;
    color: @wzyc;
}
//边框 @BK
.s3(@bkcx,@bkys,@bkxx){
    //border: @bkys @bkcx @bkxx
    border: @arguments;
}

#id3{
   .s1(red,26px);
   #p2{
        .s2(@wzyc:silver);
   }
}


//默认初始样式
.ys1(@_){
    border:1px black solid;
}
//参数写匹配符
.ys1(T){
    border-top:5px blue solid;
}
.ys1(B){
    border-bottom:5px blue solid;
}
.ys1(L){
    border-left:5px blue solid;
}
.ys1(R){
    border-right:5px blue solid;
}

#id4{
    .ys1(L);
}

#id5{
    border: 1px red solid;
    &:hover{
        border: 1px blue solid;
    }
}

#p3{
    .s3(2px,red, dashed);
}

@fs:1rem;

#p4{
    //font-size: (30px / @fs);
    font-size:30px + @fs;
    //font-size:@fs;
}

// #p5{
//     font-size:~"30px + @fs";
// }

//自定义公共样式
.zdyys{
    font-size: 28px;
}

// #id6{
//     color: red;
//     &:extend(.zdyys);
// }

#id6:extend(.zdyys){
    color: blue;
}

@import "other.txt";

.box1{
    #ss{
        background-color: lightblue;
    }
}

.box2{
    #ss{
        background-color: lightpink;
    }
}


#p4{
    .box1#ss
}

//统一样式
.tyys{
    margin: 0;
    padding: 0;
    list-style-type:circle;
    text-decoration: none;
}

//映射
.yingshe{
    //同一样式名[属性名] 来获取属性值
    list-style: .tyys[list-style-type];
}